<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Socket接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .chat-container {
            width: 100%;
            margin: 20px auto;
            background-color: #f9f9f9;
            overflow-y: auto;
            height: 300px;
            display: flex;
            flex-direction: column;
            /* 修改为从顶部往下排列 */
            padding: 10px;
            border-radius: 5px;
        }

        .message {
            margin-bottom: 10px;
        }

        .user-message {
            background-color: #007bff;
            color: #fff;
            padding: 5px 10px;
            border-radius: 10px;
            align-self: flex-end;
        }

        .bot-message {
            background-color: #f0f0f0;
            padding: 5px 10px;
            border-radius: 10px;
            align-self: flex-start;
        }

        .message-text {
            margin: 0;
        }

        .input-container {
            margin-top: 20px;
            width: 100%;
            display: flex;
        }

        .input-container input[type="text"] {
            width: calc(100% - 90px);
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .input-container input[type="submit"] {
            padding: 8px 20px;
            border-radius: 5px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="chat-container" id="chat-container">
        <div class="message bot-message">
            <p class="message-text">欢迎来到模拟聊天！</p>
        </div>
    </div>
    <div class="input-container">
        <input type="text" id="user-input" placeholder="输入消息...">
        <input type="submit" value="发送" id="send-button">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
    <script type="text/javascript">
        $(function() {
            var myAction={}, socket, id;

            var socketConfig={
                token: 'Bearer '+'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ',
                task_id: '1250659e-aba9-11e8-91a6'
            };

            $.extend(myAction, {
                initSocket: function() {
                    socket=io("ws://127.0.0.1:9090", {
                        Headers: {
                            'Access-Control-Allow-Origin': '*'
                        }
                    });  //ip

                    console.log('我获取的idsocket', socket);
                    socket.on('id', (e) => {
                        id=e
                        console.log('我获取到的id', e);
                    })
                    socket.on('answer', (e) => {
                        var chatContainer=$("#chat-container");
                        var botMessage=$("<div></div>").addClass("message bot-message");
                        let str=''
                        e.forEach(i => {
                            str+=`${i.voice_name},`
                        });
                        botMessage.html(`<p class='message-text'>io返回${str}</p>`);
                        chatContainer.append(botMessage);

                        // 滚动到底部
                        chatContainer.scrollTop(chatContainer.prop("scrollHeight"));
                    })

                },

            });


            var init=function() {
                myAction.initSocket();
            }();
            $("#send-button").click(function() {
                sendMessage();
            });

            $("#user-input").keypress(function(event) {
                if(event.which===13) {
                    sendMessage();
                }
            });

            function sendMessage () {
                var userInput=$("#user-input").val();
                if(userInput.trim()==="") return;

                var chatContainer=$("#chat-container");
                var userMessage=$("<div></div>").addClass("message user-message");
                userMessage.html("<p class='message-text'>"+userInput+"</p>");
                chatContainer.append(userMessage);
                $.get("http://127.0.0.1:9090/msg/get?msg="+userInput, function(data) {
                    // 请求成功后的处理
                    var botMessage=$("<div></div>").addClass("message bot-message");
                    botMessage.html(`<p class='message-text'>接口返回${data.data}</p>`);
                    chatContainer.append(botMessage);
                });
                // 模拟回复

            }
            // 清空输入框
            $("#user-input").val("");
        })
    </script>
</body>

</html>